import {View, Text, StyleSheet, Image, ScrollView} from 'react-native'
import React, {Component} from 'react'
import {margin, padding, rectWithSize, default as styles, HUNDRED_PERCENT} from "../../style";
import {
    convertIncomeTypeToUrlLabel,
    IncomeIconType,
    IncomeIconTypeLabel
} from "../../component/page/mine/income/incomeDetailConfig";
import {inject, observer} from "mobx-react/custom";
import toast from "../../component/common/ToastProxy";
import {getIncomeStoreInstance, IncomeDetailRes, IncomeStore} from "../../store/modules/user/income";
import {Store} from "../../store";
import {dateFormat, defaultArr, defaultObj, getAssetUrl} from "../../util";
import FastImageCustom from "../../component/widget/FastImageCustom";
import EmptyTip from "../../component/common/EmptyTip";

interface IncomeDetailProps {

}

interface IncomeDetailState {
}

interface IncomeDetailRow {
    nickName: string,
    createTime: string,
    image: any,
    title: string,
    price: number,
    score: number,
    icon: {
        url: any,
        label: IncomeIconTypeLabel
    },

}

interface RouterProps {
    params: {
        type: number,
        dateRange: Date[]
    }
}


@observer
export default class IncomeDetail extends Component<IncomeDetailProps, IncomeDetailState> {
    income: IncomeStore = getIncomeStoreInstance();

    onEnter(props: RouterProps) {
        this.refresh(props);
    }


    async refresh(props: RouterProps) {
        const {type, dateRange} = props.params;
        global.showLoading("加载中...");
        await this.income.getIncomeDetailByType(type, dateRange);
        global.hideLoading();
    }

    constructor(props: IncomeDetailProps) {
        super(props);
    }

    render() {
        const {details, type} = this.income.incomeDetailList;
        const notEmpty = details && details.length;
        return (<ScrollView bounces={false} showsVerticalScrollIndicator={false} style={IncomeDetailStyle.container}>
            {notEmpty ? details.map((data, index) => {
                const {user = defaultObj, beginDate, count, product, productIntegral, invalidCount} = data;
                const incomeType = convertIncomeTypeToUrlLabel(type);
                return (
                    <View key={index} style={index && {marginTop: 20}}>
                        <View style={[IncomeDetailStyle.rowStyle, padding(14, 20)]}>
                            <Text style={IncomeDetailStyle.miniFont}>{user.nickName}</Text>
                            <Text style={IncomeDetailStyle.miniFont}>创建时间:{dateFormat(beginDate)}</Text>
                        </View>
                        <View style={[IncomeDetailStyle.rowStyle, padding(14, 20), {marginTop: 1, height: 90}]}>
                            <FastImageCustom style={rectWithSize(57)}
                                             source={{uri: getAssetUrl(product.infoImageUrl)}}/>
                            <View
                                style={[margin(0, 18), styles.flex, styles.justifyBetween, {height: HUNDRED_PERCENT}]}>
                                <Text numberOfLines={2}
                                      style={[{lineHeight: 16}, IncomeDetailStyle.miniFont]}>{product.name}</Text>
                                <Text style={IncomeDetailStyle.boldFont}>￥{productIntegral}</Text>
                            </View>
                            <View style={[styles.justifyBetween, styles.centerH, {height: HUNDRED_PERCENT}]}>
                                <Image style={rectWithSize(40)} source={incomeType.url}/>
                                <Text
                                    style={IncomeDetailStyle.miniFont}>{incomeType.label} {count?count * productIntegral:productIntegral} 分</Text>
                            </View>
                        </View>
                        {+invalidCount > 0 ?
                            <View style={[IncomeDetailStyle.rowStyle, padding(12, 20), {marginTop: 1}]}>
                                <Text
                                    style={IncomeDetailStyle.warningFont}>{`您有${invalidCount}件商品未获得积分,请在24小时内补齐差价后生效！`}</Text>
                            </View> : null}
                    </View>
                )
            }) : <EmptyTip style={{marginTop: 60}}/>}
        </ScrollView>)
    }
}

const IncomeDetailStyle = StyleSheet.create({
    container: {},
    rowStyle: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: "#fff"
    },
    miniFont: {
        fontSize: 12,
        color: "#666"
    },
    warningFont: {
        fontSize: 12,
        color: "red"
    },
    boldFont: {
        fontSize: 12,
        color: "#666",
        fontWeight: "bold"
    },
});

 